<template>
	<div class="createPost-container">
		<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">

			<sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
				<commentdropdown v-model="postForm.comment_disabled"></commentdropdown>
				<platformdropdown v-model="postForm.platforms"></platformdropdown>
				<sourceurldropdown v-model="postForm.source_uri"></sourceurldropdown>
				<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
					Publish
				</el-button>
				<el-button v-loading="loading" type="warning" @click="draftForm">
					Draft
				</el-button>
			</sticky>

			<div class="createPost-main-container">
				<el-row>
					<warning></warning>

					<el-col :span="24">
						<el-form-item style="margin-bottom: 40px;" prop="title">
							<mdinput v-model="postForm.title" :maxlength="100" name="name" required>
								Title
							</mdinput>
						</el-form-item>

						<div class="postInfo-container">
							<el-row>
								<el-col :span="8">
									<el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
										<el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
											<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item"></el-option>
										</el-select>
									</el-form-item>
								</el-col>

								<el-col :span="10">
									<el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
										<el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time"></el-date-picker>
									</el-form-item>
								</el-col>

								<el-col :span="6">
									<el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
										<el-rate v-model="postForm.importance"
												 :max="3"
												 :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
												 :low-threshold="1"
												 :high-threshold="3"
												 style="display:inline-block"></el-rate>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>

				<el-form-item style="margin-bottom: 40px;" label-width="70px" label="Summary:">
					<el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Please enter the content"></el-input>
					<span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}words</span>
				</el-form-item>

				<el-form-item prop="content" style="margin-bottom: 30px;">
					<tinymce ref="editor" v-model="postForm.content" :height="400"></tinymce>
				</el-form-item>

				<el-form-item prop="image_uri" style="margin-bottom: 30px;">
					<upload v-model="postForm.image_uri"></upload>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>

<script>
	const l = httpVueLoader;
	const Tinymce = l('/vue/components/Tinymce/index.vue');
	const Upload = l('/vue/components/Upload/SingleImage3.vue');
	const MDinput = l('/vue/components/MDinput/index.vue');
	const Sticky = l('/vue/components/Sticky/index.vue'); // 粘性header组件
	const CommentDropdown = l("/vue/views/example/components/Dropdown/Comment.vue");
	const PlatformDropdown = l("/vue/views/example/components/Dropdown/Platform.vue");
	const SourceUrlDropdown = l("/vue/views/example/components/Dropdown/SourceUrl.vue");
	const Warning = l("/vue/views/example/components/Warning.vue");
	import { fetchArticle } from "/vue/api/article.js";
	import { searchUser } from "/vue/api/remote-search.js";
	import * as Validate from "/vue/utils/validate.js";

	const defaultForm = {
		status: 'draft',
		title: '', // 文章题目
		content: '', // 文章内容
		content_short: '', // 文章摘要
		source_uri: '', // 文章外链
		image_uri: '', // 文章图片
		display_time: undefined, // 前台展示时间
		id: undefined,
		platforms: ['a-platform'],
		comment_disabled: false,
		importance: 0
	}

	module.exports = {
		name: 'ArticleDetail',
		components: {
			"tinymce": Tinymce,
			"mdinput": MDinput,
			"upload": Upload,
			"sticky": Sticky,
			"warning": Warning,
			"commentdropdown": CommentDropdown,
			"platformdropdown": PlatformDropdown,
			"sourceurldropdown": SourceUrlDropdown
		},
		props: {
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			const validateRequire = (rule, value, callback) => {
				if (value === '') {
					this.$message({
						message: rule.field + '为必传项',
						type: 'error'
					})
					callback(new Error(rule.field + '为必传项'))
				} else {
					callback()
				}
			}
			const validateSourceUri = (rule, value, callback) => {
				if (value) {
					if (Validate.validURL(value)) {
						callback()
					} else {
						this.$message({
							message: '外链url填写不正确',
							type: 'error'
						})
						callback(new Error('外链url填写不正确'))
					}
				} else {
					callback()
				}
			}
			return {
				postForm: Object.assign({}, defaultForm),
				loading: false,
				userListOptions: [],
				rules: {
					image_uri: [{ validator: validateRequire }],
					title: [{ validator: validateRequire }],
					content: [{ validator: validateRequire }],
					source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
				},
				tempRoute: {}
			}
		},
		computed: {
			contentShortLength() {
				return this.postForm.content_short.length
			},
			displayTime: {
				// set and get is useful when the data
				// returned by the back end api is different from the front end
				// back end return => "2013-06-25 06:59:25"
				// front end need timestamp => 1372114765000
				get() {
					return (+new Date(this.postForm.display_time))
				},
				set(val) {
					this.postForm.display_time = new Date(val)
				}
			}
		},
		created() {
			if (this.isEdit) {
				const id = this.$route.params && this.$route.params.id
				this.fetchData(id);
			}

			// Why need to make a copy of this.$route here?
			// Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
			// https://github.com/PanJiaChen/vue-element-admin/issues/1221
			this.tempRoute = Object.assign({}, this.$route)
		},
		methods: {
			fetchData(id) {
				fetchArticle(id).then(response => {
					this.postForm = response.data

					// just for test
					this.postForm.title += `   Article Id:${this.postForm.id}`
					this.postForm.content_short += `   Article Id:${this.postForm.id}`

					// set tagsview title
					this.setTagsViewTitle()

					// set page title
					this.setPageTitle()
				}).catch(err => {
					console.log(err)
				})
			},
			setTagsViewTitle() {
				const title = 'Edit Article'
				const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
				this.$store.dispatch('tagsView/updateVisitedView', route)
			},
			setPageTitle() {
				const title = 'Edit Article'
				document.title = `${title} - ${this.postForm.id}`
			},
			submitForm() {
				console.log(this.postForm)
				this.$refs.postForm.validate(valid => {
					if (valid) {
						this.loading = true
						this.$notify({
							title: '成功',
							message: '发布文章成功',
							type: 'success',
							duration: 2000
						})
						this.postForm.status = 'published'
						this.loading = false
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			draftForm() {
				if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
					this.$message({
						message: '请填写必要的标题和内容',
						type: 'warning'
					})
					return
				}
				this.$message({
					message: '保存成功',
					type: 'success',
					showClose: true,
					duration: 1000
				})
				this.postForm.status = 'draft'
			},
			getRemoteUserList(query) {
				searchUser(query).then(response => {
					if (!response.data.items) return
					this.userListOptions = response.data.items.map(v => v.name)
				})
			}
		}
	}
</script>

<style scoped>
	.createPost-container {
		position: relative;
	}

		.createPost-container .createPost-main-container {
			padding: 40px 45px 20px 50px;
		}

			.createPost-container .createPost-main-container .postInfo-container {
				position: relative;
				margin-bottom: 10px;
			}

				.createPost-container .createPost-main-container .postInfo-container:after {
					content: "";
					display: table;
					clear: both;
				}

				.createPost-container .createPost-main-container .postInfo-container .postInfo-container-item {
					float: left;
				}

		.createPost-container .word-counter {
			width: 40px;
			position: absolute;
			right: 10px;
			top: 0px;
		}

	.article-textarea /deep/ textarea {
		padding-right: 40px;
		resize: none;
		border: none;
		border-radius: 0px;
		border-bottom: 1px solid #bfcbd9;
	}
</style>
